<template>
	<view>
		<view class="userinfo">
			<view class="userinfo-left">
				收件人
			</view>
			<view class="userinfo-right">
				<input type="text" v-model="seach.name" placeholder="请输入收件人姓名" />
			</view>
		</view>
		<view class="userinfo">
			<view class="userinfo-left">
				电话号码
			</view>
			<view class="userinfo-right">
				<input type="text" v-model="seach.tel" placeholder="请输入收件人电话号码" />
			</view>
		</view>
		<view class="userinfo">
			<view class="userinfo-left">
				所在地区
			</view>
			<view style="margin-left: 250rpx;" class="userinfo-right">
				<input type="text" @click="showMulLinkageThreePicker" :value="city" />

			</view>

			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
		<view class="userinfo">
			<view class="userinfo-left">
				详细地址
			</view>
			<view class="userinfo-right">
				<input type="text" v-model="seach.cityBak" placeholder="请输入详细地址" />
			</view>
		</view>
		<view class="floot">
			保存地址
		</view>
		<view class="userinfo">
			<view class="userinfo-left">
				设置默认地址
			</view>
			<view class="userinfo-right">
				<view>
					<switch checked @change="switch1Change" />

				</view>
			</view>
		</view>
		<view v-if="this.id" @click="dieaddress" class="die">
			删除收货地址
		</view>
		<view class="floot" @click="goadd">
			保存地址
		</view>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '@/common/city.data.js';
	import MineApi from '@/api/mine/index.js'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				userinfo: [],
				themeColor: '#007AFF',
				pickerValueDefault: [0],
				cityPickerValueDefault: [0, 0, 1],
				city: '请输入',
				seach: {},
				isDefault: false,
				citycode: [],
				id: ''
			};
		},
		methods: {
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
				this.isDefault = e.target.value;
			},
			onCancel(e) {
				console.log(e)
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				console.log(e);
				this.city = e.label
				this.citycode = e
			},
			dieaddress() {
				MineApi.addressdel({
					id: this.id
				}).then((res) => {
					uni.showToast({
						title: '已删除',
						duration: 2000,
						icon: 'none'
					});
					uni.navigateTo({
						url: '../address'
					});
				})
			},
			getdetail() {
				MineApi.addressdetail({
					id: this.id
				}).then((res) => {
					console.log(res, '111')
					this.seach = res.data.data
					this.city=res.data.data.cityStr
				})
			},
			goadd() {
				var cityCode = []
				cityCode[0] = this.citycode.cityCode
				for (var i = 0; i < this.citycode.value.length; i++) {
					cityCode.push(this.citycode.value[i])
				}
				var Obj = {
					userId: this.userinfo.data.id,
					name: this.seach.name,
					tel: this.seach.tel,
					cityCode: cityCode.join(),
					isUse: this.isDefault ? 1 : 0,
					cityBak: this.seach.cityBak,
					cityStr: this.city
				}
				if (this.id) {

					MineApi.addressupdate(Obj, {
						id: this.id
					}).then((res) => {
						uni.showToast({
							title: '保存成功',
							duration: 2000,

						});
						uni.navigateTo({
							url: '../address'
						});
					})
				} else {
					MineApi.addresssave(Obj).then((res) => {
						console.log(res)
						uni.showToast({
							title: '添加成功',
							duration: 2000,

						});
						uni.navigateTo({
							url: '../address'
						});
					})
				}
			}

		},
		onLoad(option) {

			this.id = option.id
			if (this.id) {
				this.getdetail()
			}

		},
		created() {
			this.userinfo = uni.getStorageSync('storage_key');
			console.log(this.userinfo)
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f1ece7;
	}

	.userinfo {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;

		.userinfo-right {
			margin-top: 30rpx;
		}
	}

	.die {
		background: #f2e0db;
		text-align: center;
		line-height: 100rpx;
		height: 100rpx;
	}

	.floot {
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		color: #fff;
		position: fixed;
		bottom: 20rpx;
		left: 70rpx;
		line-height: 80rpx;
		text-align: center;
		background: #354e44;
	}
</style>
